import React from 'react'
import './Versus.css'
import TeamAvatar from "./TeamAvatar/TeamAvatar"
import {getDifferenceBetweenDates} from "../../../../../utils/dateService";
import {connect} from "react-redux";

const Versus = props => {

    const {
        game,
        // games,
        atTop,
    } = props

    const {
        home_team,
        away_team,
        info,
    } = game

    const homeTeamIconUrl = home_team.logo
    const awayTeamIconUrl = away_team.logo

    const homeTeamName = home_team.name_zh
    const awayTeamName = away_team.name_zh
    const homeScore = home_team.score
    const awayScore = away_team.score

    const homeTeam = (
        <div
            className='game-room-vs-player-container'
            style={{
                width: '33%',
                position: 'relative',
            }}
        >
            <TeamAvatar
                iconUrl={homeTeamIconUrl}
                atTop={atTop}
                score={homeScore}
            />
            {atTop
                ? null
                : <div
                    style={{
                        position: 'absolute',
                        top: '50%',
                        transform: 'translateY(-50%)',
                        right: '10px',
                        fontSize: '22px',
                        fontWeight: '600',
                        color: 'rgba(255,255,255,1)',
                        lineHeight: '30px',
                    }}
                >{homeScore}</div>
            }
            {atTop
                ? <div className='game-room-vs-player-name'>{homeTeamName}</div>
                : null
            }

        </div>
    )

    const awayTeam = (
        <div
            className='game-room-vs-player-container'
            style={{
                width: '33%',
            }}
        >
            <TeamAvatar
                iconUrl={awayTeamIconUrl}
                atTop={atTop}
            />
            {atTop
                ? null
                : <div
                    style={{
                        position: 'absolute',
                        top: '50%',
                        transform: 'translateY(-50%)',
                        left: '10px',
                        fontSize: '22px',
                        fontWeight: '600',
                        color: 'rgba(255,255,255,1)',
                        lineHeight: '30px',
                    }}
                >{awayScore}</div>
            }
            {atTop
                ? <div className='game-room-vs-player-name'>{awayTeamName}</div>
                : null
            }

        </div>
    )

    const status = info.statusid
    const isEarly = status === 1
    const isFirstHalf = status === 2
    const isHalfTime = status === 3
    const isSecondHalf = status === 4
    const isFinished = status === 8
    // const isDelay = status >= 9
    const isInit = status === 999

    const realtime = info.realtime
    const startAtTimeObj = new Date(realtime * 1000)
    const now = new Date()
    const diff = getDifferenceBetweenDates(startAtTimeObj, now)

    // let curTime
    // if (isEarly) curTime = '未开赛'
    // if (isFirstHalf) curTime = `上半场 ${diff.minutesDiff + 1}\'`
    // if (isHalfTime) curTime = '半场 45\''
    // if (isSecondHalf) curTime = `下半场 ${diff.minutesDiff + 45 + 1}\'`

    // if (isDelay) curTime = `延迟开赛`

    let curTime
    if (isEarly) curTime = '未'
    if (isFirstHalf) curTime = <>上半场 {diff.minutesDiff + 1}<span className='second-blink'>'</span></>
    if (isHalfTime) curTime = <>半场 45<span className='second-blink'>'</span></>
    if (isSecondHalf) curTime = <>下半场 {diff.minutesDiff + 45 + 1}<span className='second-blink'>'</span></>
    if (isFinished) curTime = `完`


    const scores = (
        <div
            style={{
                width: '33%',
            }}
        >
            <div
                className='game-room-vs-c-time'
                style={{
                    top: atTop ? '' : '50%',
                    transform: atTop ? '' : 'translate(-50%, -50%)',
                }}
            >
                {curTime}
            </div>
            {atTop
                ? (
                    <div className='game-room-vs-score'>
                        {homeScore} - {awayScore}
                    </div>
                )
                : null
            }

        </div>
    )

    return (
        <div
            className='game-room-vs-container'
            style={{
                top: atTop ? '' : '50%',
            }}
        >
            {homeTeam}
            {isInit ? <div/> : scores}
            {awayTeam}
        </div>
    )
}

const mapState = state => ({
    game: state.game.currentGame,
    games: state.game.games,
})


export default connect(mapState)(Versus)
